<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
    <meta name="format-detection" content="telephone=yes"/>
    <title>订单</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/order.css">
    <style>
        /*发货放款方式*/
.ship-img{margin-left: 10px;}
.content-ship{position: absolute;border-radius: 10px; background-color: #FFFFFF;height: 280px; top: 20%;left: 10%;width: 80%;margin: 0 auto;text-align: center;}
.content-ship span{font-size: 1.1em;font-weight: 600; color: #3b3b3b;display: block;height: 55px;line-height: 55px;}
.content-ship ul{width:100%;text-align: left;color: #3b3b3b;}
.content-ship ul li{font-size: 0.9em; border-top: 1px solid #F2F2F2;height: 40px;line-height:40px;padding: 0 20px;}
.sel{color: #E41F1F;background: url("../../images/Artboard 113.png")no-repeat right;background-size: 16px;background-position-x:92%; }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="address">
        <div class="address-box">
            <div class="Customer-box dis_in">
                <span class="address-sp f1 fz8 dis_b">客户：<span>请选择客户信息</span></span>
                <span class="address-sp f1 fz8 dis_b">地址：<span>请选择地址</span></span>
            </div>
            <img class="address-more dis_in" src="../../images/Artboard 13@2x.png" alt="">
        </div>
        <div class="address-time b-top b-btm fz8 f1">
            <div class="address-time-box">
                收货时间：<span class="f2" ><input type="button" class="demo1" id="demo1" value="年/月/日"><img src="../../images/Artboard 13@2x.png" alt=""></span>
            </div>
        </div>

    </div>
    <div class="product-box2 b-btm">
        <div class="product"><span>产品</span></div>
        <div class="product-style b-top">
            <div class="product-style-box">
                <div class="pro-left">
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">产品名称：</span><span class=" dis_in f1 fz8">SIGMA卧式冷柜</span>
                    </div>
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">产品编码：</span><span class=" dis_in f1 fz8">HF01-JC-65SFW</span>
                    </div>
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">型号：</span><span class=" f1 dis_in fz8">HF01-JC-65SFW</span>
                    </div>
                </div>
                <div class="pro-right dis_in fr f1 fz8">
                    <span class="red">19600.00</span>*<span class="f1 fz8">1</span>台
                </div>
            </div>
        </div>
        <div class="product-style b-top">
            <div class="product-style-box">
                <div class="pro-left">
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">产品名称：</span><span class=" dis_in f1 fz8">SIGMA卧式冷柜</span>
                    </div>
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">产品编码：</span><span class=" dis_in f1 fz8">HF01-JC-65SFW</span>
                    </div>
                    <div>
                        <span class="pro-left1 dis_in f1 fz8">型号：</span><span class=" f1 dis_in fz8">HF01-JC-65SFW</span>
                    </div>
                </div>
                <div class="pro-right dis_in fr f1 fz8">
                    <span class="red">19600.00</span>*<span class="f1 fz8">1</span>台
                </div>
            </div>
        </div>
    </div>
    <div class="total-box b-btm b-top">
        <div class="total-box1">
            <div class="total-left dis_in">
                <span>总价（含税）：</span>
                <span>申请折扣：</span>
                <span>折后总价：</span>
            </div>
            <div class="total-right dis_in">
                <span class="red">16,763.00</span>
                <span class="f1"><input type="text" placeholder="0.00">&nbsp;%&nbsp;选项</span>
                <span><input class="red" type="text" placeholder="0.00"></span>
            </div>
        </div>

    </div>
    <div class="parts-box b-top b-btm">
        <div class="product b-btm"><span>配件</span></div>
        <div class="parts">
            <div class="parts-left dis_in">
                <span>配件商品（每台800／套）：</span>
                <span>配件总价：</span>
                <span>运送费：</span>
                <span>安装费：</span>
                <span>喷色费：</span>
            </div>
            <div class="parts-right dis_in">
                <span class="f1">3／套</span>
                <span><input type="text" placeholder="0.00"></span>
                <span><input type="text" placeholder="0.00"></span>
                <span><input type="text" placeholder="0.00"></span>
                <span><input type="text" placeholder="0.00"></span>
            </div>
        </div>
    </div>
    <div class="order-num-box parts-box b-top b-btm">
        <div class="order-num1 parts">
            <div class="parts-left dis_in">
                <span>订单编号：</span>
                <span>订单日期：</span>
                <span>销售人员：</span>
                <span>付款类型：</span>
                <span>收款协议：</span>
            </div>
            <div class="parts-right dis_in f1">
                <span class="f1">1000000000064</span>
                <span>2017／6／21</span>
                <span>DEMO</span>
                <span><img src="../../images/Artboard 13@2x.png" alt=""></span>
                <span class="f-red " ><span class="dis_in shipping">发货30天回款</span><img class="ship-img" src="../../images/Artboard 13@2x.png" alt=""></span>
            </div>
            <div class="remarks f1 fz8">
                <span>备注：</span><br>
                <input type="text" placeholder="请输入备注消息">
            </div>
        </div>
    </div>
    <div class="background hide1">
        <div class="content-ship">
            <span>请选择收款协议</span>
            <ul id="ship-ul1">
                <li class="sel">发货30天回款</li>
                <li >发货60天回款</li>
                <li>发货月结30天回款</li>
                <li>货到付款</li>
                <li>票到90天回款</li>
            </ul>
        </div>
    </div>
    <footer class="order-footer b-top1">
        <div class="foot-left dis_in">
            <span class="f1 fz9">总价：<span class="red">16,763.00</span></span>
        </div>
        <div class="foot-right dis_in">
            提交审核
        </div>
    </footer>
</div>
<script src="../../js/jquery-2.1.4.min.js"></script>
<script src="../../js/data.js"></script>
<script>
    var calendar = new datePicker();
    calendar.init({
        'trigger': '#demo1', /*按钮选择器，用于触发弹出插件*/
        'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
        'minDate':'1900-1-1',/*最小日期*/
        'maxDate':'2100-12-31',/*最大日期*/
        'onSubmit':function(){/*确认时触发事件*/
            var theSelectData=calendar.value;
        },
        'onClose':function(){/*取消时触发事件*/
        }
    });
    $(document).ready(function(){
        $('.shipping').click(function(){
            $('.background').show();
        });
        var Uarry=$("#ship-ul1 li");//获取所有的li元素
        $("#ship-ul1 li").click(function(){//点击事件
            $(this).addClass('sel').siblings().removeClass('sel');
            var count=$(this).index();//获取li的下标
            var Tresult=Uarry.eq(count).text();
            $(".shipping").text(Tresult);
            $('.background').hide();
        });

    });

</script>
</body>
</html>